<template>
  <div class="search-author">
    <SearchKindComponent v-model="searchKinds"/>
    <el-input v-model="kw" class="search-author-input" :placeholder="sk_index===1?'请输入正确的邮箱':'请输入作者名字，格式：名@姓'"></el-input>
    <el-button style="margin-left: 10px" @click="searchPagedAuthors">搜索</el-button>
  </div>
  <el-table :data="page.records">
    <el-table-column prop="name" label="姓名" show-overflow-tooltip width="80"/>
    <el-table-column prop="orcid" label="ORCID" show-overflow-tooltip width="180"/>
    <el-table-column prop="email" label="邮箱" show-overflow-tooltip/>
    <el-table-column prop="region" label="地区" show-overflow-tooltip width="80"/>
    <el-table-column prop="city" label="城市" show-overflow-tooltip/>
    <el-table-column prop="workStation" label="部门" show-overflow-tooltip/>
    <el-table-column prop="domainsStr" label="领域" show-overflow-tooltip/>
    <el-table-column fixed="right" label="操作" width="100px">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="showAuthorDetail(scope.$index)">查看</el-button>
        <el-button link type="primary" size="small" @click="editAuthor(scope.$index)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-left: 20px"
    ></el-pagination>
    <div style="margin-left: auto">
      <AddAuthorDialog/>
    </div>
  </div>
  <author-show-dialog-component/>
  <author-edit-dialog-component/>
</template>

<script setup>
import AuthorShowDialogComponent from "@/components/add/document/author/AuthorShowDialogComponent.vue";
import {provide, ref, onMounted} from "vue";
import SearchKindComponent from "@/components/add/document/common/SearchKindComponent.vue";
import {getPagedAuthorsApi} from "@/apis/author";
import {ElMessage} from "element-plus";
import AddAuthorDialog from "@/components/add/author/AddAuthorDialog.vue";
import AuthorEditDialogComponent from "@/components/author/authorEditDialogComponent.vue";

const authorShowDialog = ref(false)
provide('authorShowDialog', authorShowDialog)
const authorEditDialog = ref(false);
provide('authorEditDialog', authorEditDialog)

const authorDetail = ref({})
provide('showAuthor', authorDetail)


const editAuthor = (j) => {
  const len = page.value.records.length
  if (0 <= j && j < len) {
    authorDetail.value = JSON.parse(JSON.stringify(page.value.records[j]))
    authorEditDialog.value = true
  }
}

const showAuthorDetail = (j) => {
  const len = page.value.records.length
  if (0 <= j && j < len) {
    authorDetail.value = JSON.parse(JSON.stringify(page.value.records[j]))
    authorShowDialog.value = true
  }
}


const currentPage = ref(1)
const pageSize = ref(10)
const page = ref({records: [], total: 0})

const kw = ref('')
const searchKinds = ref(['姓名', '邮箱'])
const sk_index = ref(0)
provide('sk_index', sk_index)

const searchPagedAuthors = () => {
  let x = kw.value?.trim()
  if (!x) x = ''
  if (sk_index.value === 0 || sk_index.value === 1) {
    getPagedAuthorsApi(currentPage.value, pageSize.value, x ? sk_index.value + 1 : 0, x).then(resp => {
      if (resp.data.code === 200) {
        page.value = resp.data.data
        for (let i = 0; i < page.value.records.length; i++) {
          const it = page.value.records[i];
          page.value.records[i].name = it.lastName + it.firstName
        }
        console.log(page.value)
      } else {
        ElMessage.error(resp.data.msg)
      }
    })
  } else {
    ElMessage.error('查询方式有误')
  }
}

provide('getPagedAuthors', searchPagedAuthors)

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 切换每页大小时，重置当前页码为第一页
  searchPagedAuthors()
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  searchPagedAuthors()
}

onMounted(() => {
  searchPagedAuthors()
})


</script>
<style scoped>
.search-author-input {
  width: 400px;
  margin-left: 10px;
}

.search-author {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
</style>